<template>
  <div class="box-container">
    <div class="leftBox">
      <div class="btns">
        <!-- <el-button type="primary" icon="el-icon-edit" circle /> -->
        <button class="css-button css-button-3d css-button-3d--sky" @click="insertClass">
          <i class="el-icon-plus" />新增
        </button>
      </div>
      <div class="search">
        <el-input v-model="className" clearable placeholder="输入类别名称搜索" @input="classNameInput" />
      </div>
      <div class="numberClass">
        <numberClassBtn v-for="item in numberClassList" :key="item.id" :item="item" @clickClass="clickClass(item)" @contextmenu="contextmenu(item)" />
      </div>
    </div>
    <div class="rightBox">
      <div class="tabBox">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="0">
            <numberList v-if="activeName === '0'" :use-state="0" :num-class="numClass" />
          </el-tab-pane>
          <el-tab-pane label="未使用" name="1">
            <numberList v-if="activeName === '1'" :use-state="1" :num-class="numClass" />
          </el-tab-pane>
          <el-tab-pane label="使用中" name="2">
            <numberList v-if="activeName === '2'" :use-state="2" :num-class="numClass" />
          </el-tab-pane>
          <el-tab-pane label="已使用" name="3">
            <numberList v-if="activeName === '3'" :use-state="3" :num-class="numClass" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 类别右击菜单 -->
    <rightClickMenu
      :class-index="0"
      :rightclick-info="rightclickInfo"
      @updClassName="updClassName"
      @insertClass="insertClass"
      @deleteClass="deleteClass"
      @exportExcel="exportExcel"
    />
    <updClassNameModel ref="updClassNameModel" @ok="updClassNameOk" />
  </div>
</template>

<script>
import numberClassBtn from './components/numberClassBtn.vue'
import numberList from './components/numberList.vue'
import updClassNameModel from './components/updClassNameModel.vue'
import { apiGetNumberClass, apiInsertNumberClass, apiDeleteNumberClass } from '@/api/GetNumberBusiness'
import rightClickMenu from '@/components/Asc/rightClickMenu'
import excel from 'lay-excel'
import { postAction } from '@/api/manage'
import { antiShake } from '@/utils'

export default {
  components: {
    numberClassBtn,
    numberList,
    updClassNameModel,
    rightClickMenu
  },
  data() {
    return {
      rightclickInfo: {},
      activeName: '1',
      className: '', // 类别名查询条件
      numClass: '',
      numberClassList: [],
      userInfo: this.$ls.get('USER_INFO') || {}
    }
  },
  watch: {},
  created() {
    this.getClassList()
  },
  mounted() {},
  methods: {
    // 右击类别
    contextmenu(item) {
      this.rightclickInfo = {
        position: {
          x: window.event.clientX,
          y: window.event.clientY
        },
        menulists: [
          {
            fnName: 'updClassName',
            params: { id: item.id, className: item.className },
            icoName: 'el-icon-edit-outline',
            btnName: '重命名'
          },
          {
            fnName: 'insertClass',
            icoName: 'el-icon-plus',
            btnName: '新增类别'
          },
          {
            fnName: 'deleteClass',
            params: { id: item.id, className: item.className },
            icoName: 'el-icon-delete',
            btnName: '删除类别'
          }
          // {
          //   fnName: 'exportExcel',
          //   params: { className: item.className },
          //   icoName: 'el-icon-download',
          //   btnName: '导出旗下数据(excel)'
          // }
        ]
      }
      console.log('右击类别', item)
      // 全部节点右击菜单只有新增
      if (item.id === 0) {
        this.rightclickInfo.menulists = [{
          fnName: 'insertClass',
          icoName: 'el-icon-plus',
          btnName: '新增类别'
        }]
      }
      this.selectNode(item)
    },
    // 重命名类别
    updClassName(e) {
      console.log('重命名类别', e)
      this.$refs.updClassNameModel.edit(e)
      this.$refs.updClassNameModel.title = '重命名'
    },
    // 新类别保存
    updClassNameOk() {
      this.getClassList()
    },
    // 新增一个类别
    insertClass() {
      this.$prompt('请输入要新增的类别名称', '新增类别', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if (value) {
          this.$store.dispatch('app/setLoading', true)
          apiInsertNumberClass({ className: value }).then(res => {
            console.log('新增类别结果', res)
            if (res.code === 1) {
              this.$message.success(res.message)
              this.getClassList()
            } else {
              this.$message.warning(res.message)
            }
          }).catch((res) => {
            this.$message.error(res.message)
          }).finally(res => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          this.$message({
            type: 'warning',
            message: '类别名称不能为空'
          })
          return
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 删除指定类别
    deleteClass(e) {
      console.log('删除指定类别', e)
      this.$confirm(`确定删除类别 ${e.className} 吗?`, '删除类别！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('app/setLoading', true)
        apiDeleteNumberClass({ id: e.id }).then(res => {
          console.log('新增类别结果', res)
          if (res.code === 1) {
            this.$message.success(res.message)
            this.getClassList()
          } else {
            this.$message.warning(res.message)
          }
        }).catch((res) => {
          this.$message.error(res.message)
        }).finally(res => {
          this.$store.dispatch('app/setLoading', false)
        })
      })
    },
    // 导出excel
    exportExcel(item) {
      console.log('导出excel', item)
      this.$store.dispatch('app/setLoading', true)
      // this.exportExcelLoading = true
      postAction('', { className: item.className }).then((res) => {
        console.log('导出的数据', res)
        if (res.code === 1) {
          this.createExcel(res.data.list)
        }
      }).finally(() => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    // 生成excel
    createExcel(data) {
      if (data.length === 0) {
        this.$message.info('无数据可导出')
        this.exportExcelLoading = false
        return
      }
      // 过滤需要的列
      const filterColNameArr = ['Tablename']
      filterColNameArr.push(`UserNum`)
      filterColNameArr.push(`createTime`)
      filterColNameArr.push(`updateTime`)
      data = excel.filterExportData(data, filterColNameArr)
      // 加列头
      data.unshift({
        Tablename: '仓库名',
        UserNum: '所属用户',
        createTime: '创建时间',
        updateTime: '更新时间'
      })
      // 执行导出函数，系统会弹出弹框
      excel.exportExcel(
        {
          sheet1: data
        },
        `导出账号数据${this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}.xlsx`,
        'xlsx'
      )
      this.exportExcelLoading = false
      this.$message.success('导出成功')
    },
    // 点击类别
    clickClass(item) {
      console.log('item', item)
      this.selectNode(item)
    },
    // 选中某个节点 其他节点取消选中状态
    selectNode(item) {
      this.numClass = item.className
      this.numberClassList.forEach(v => {
        v.active = v.id === item.id
      })
    },
    // tab切换
    handleClick(tab, event) {
      console.log(tab.label, tab.name)
      // console.log(tab, event)
    },
    // 类别搜索值更新
    classNameInput(e) {
      console.log('eeeee', e)
      antiShake(() => {
        this.getClassList(e)
      }, 600)
    },
    // 账号类别列表
    getClassList(className = '') {
      const p = {
        UserNum: this.userInfo.loginNum,
        className
      }
      this.$store.dispatch('app/setLoading', true)
      apiGetNumberClass(p).then(res => {
        console.log('账号类别列表', res)
        if (res.code === 1) {
          this.numberClassList = res.data.list.map(v => {
            v.active = false
            return v
          })
          this.numberClassList.unshift({
            className: '全部',
            id: 0,
            active: true
          })
          console.log('this.numberClassList', this.numberClassList)
        } else {
          this.$message.warning(res.message)
        }
      }).catch((res) => {
        this.$message.error(res.message)
      }).finally(res => {
        this.$store.dispatch('app/setLoading', false)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box-container{
  display: flex;
  background-color: #fff;
  .leftBox{
    width: 20%;
    // min-width: 200px;
    // background-color: rgb(239, 239, 239);
    .btns{
      margin: 20px;
    }
    .search{
      margin: 20px;
    }
    .numberClass{
      overflow-y: auto;
      height: 730px;
      padding-right: 16px;
      border-right: 1px #dfe6ec solid;
    }
  }
  .rightBox{
    width: 80%;
    .tabBox{
      padding: 16px 16px 0;
      background-color: #fff;
    }
  }
}

/*滚动轨道样式*/
::-webkit-scrollbar-track {
	background: #c1c1c1;
	border-radius: 4px;
}
/*滚动条*/
::-webkit-scrollbar-thumb {
	background: #1890ff;
	border-radius: 10px;
}
::-webkit-scrollbar {
    width:6px;
}

// 类别操作按钮
.css-button-3d--sky {
  width: 78px;
  height: 32px;
  color: #fff;
  // padding: 5px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  border: none;
  background: #80ed99;
  box-shadow: 0 5px #57cc99;
}
.css-button-3d--sky:hover {
  box-shadow: 0 3px #57cc99;
  top: 1px;
}
.css-button-3d--sky:active {
  box-shadow: 0 0 #57cc99;
  top: 5px;
}
.el-icon-plus{
  margin-right: 6px;
  // position: absolute;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);
}
</style>

